<template>
  <a-form-model ref="ruleForm" :model="ruleForm" :rules="rules" v-bind="layout">
    <a-row>
      <a-col :span="12">
        <a-form-model-item has-feedback label="生效时间" prop="data1">
          <a-date-picker
            v-model="ruleForm.data1"
            placeholder="选择时间"
            style="width: 100%"
          />
        </a-form-model-item>
      </a-col>
      <a-col :span="12">
        <a-form-model-item has-feedback label="失效时间" prop="data1">
          <a-date-picker
            v-model="ruleForm.data1"
            placeholder="选择时间"
            style="width: 100%"
          />
        </a-form-model-item>
      </a-col>
    </a-row>
    <a-row>
      <a-col :span="12">
        <a-form-model-item has-feedback label="职称名称" prop="pass">
          <a-input v-model="ruleForm.pass" type="password" autocomplete="off" />
        </a-form-model-item>
      </a-col>
      <a-col :span="12">
        <a-form-model-item has-feedback label="职称级别" prop="pass">
          <a-select v-model="ruleForm.pass" type="password" autocomplete="off">
            <a-select-option value="shanghai"> Zone one </a-select-option>
            <a-select-option value="beijing"> Zone two </a-select-option>
          </a-select>
        </a-form-model-item>
      </a-col>
    </a-row>
    <a-row>
      <a-col :span="12">
        <a-form-model-item has-feedback label="是否主要职业资格" prop="pass">
          <a-input v-model="ruleForm.pass" type="password" autocomplete="off" />
        </a-form-model-item>
      </a-col>
    </a-row>

    <a-form-model-item :wrapper-col="{ span: 14, offset: 4 }">
      <a-button type="primary" @click="submitForm('ruleForm')">
        Submit
      </a-button>
      <a-button style="margin-left: 10px" @click="resetForm('ruleForm')">
        Reset
      </a-button>
    </a-form-model-item>
  </a-form-model>
</template>
<script>
export default {
  data () {

    return {
      ruleForm: {
        pass: '',
        checkPass: '',
        age: '',
        data1: ""
      },
      rules: {
        data1: [{ required: true, trigger: 'change' }]
      },
      layout: {
        labelCol: { span: 6 },
        wrapperCol: { span: 16 },
      },
    }
  },
  methods: {
    submitForm (formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          alert('submit!')
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    resetForm (formName) {
      this.$refs[formName].resetFields()
    },
  },
};
</script>